<template>
	<view class="container">
		<view class="header">
			<!-- 商铺详情 -->
			<view class="detail">
				<view class="img">
					<image :src="storeDetail.enterprise_logo" mode=""></image>
				</view>
				<view class="right">
					<view class="name">
						{{storeDetail==null?'暂无名称':storeDetail.enterprise_name}}
					</view>
					<view class="intro">
						<u-parse v-if="storeDetail!=null" :html="storeDetail.desc"></u-parse>
						<p v-else>暂无简介</p>
					</view>
				</view>
			</view>
			<view class="search">
				<u-search @search="search" :show-action="false" :clearabled="true" placeholder="请输入商品名"></u-search>
			</view>
		</view>
		<!-- 导航 -->
		<view class="navbar">
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1,synthesis)">
				<text>销量</text>
				<view class="p-box" v-if="filterIndex === 1">
					<uni-icons size="16" type="arrowdown" class="icon" color="#F8124A" v-if="synthesis == 1"></uni-icons>
					<uni-icons size="16" type="arrowup" class="icon" color="#F8124A" v-else></uni-icons>
				</view>
			</view>

			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2,synthesis)">
				<text>价格</text>
				<view class="p-box" v-if="filterIndex === 2">
					<uni-icons size="16" type="arrowdown" class="icon" color="#F8124A" v-if="synthesis == 1"></uni-icons>
					<uni-icons size="16" type="arrowup" class="icon" color="#F8124A" v-else></uni-icons>
				</view>
			</view>
			<view class="cate-item filter" @tap="changeSytle">
				<image class="icon-filter" src="../../static/img/change.png"></image>
			</view>
		</view>
		<!-- 商品列表 -->
		<scroll-view @scrolltolower="lower" scroll-y class="shop-content">
			<view class="goods-list" v-if="showStyle">
				<view v-for="(item, index) in goodsCate" :key="index" class="goods-item" @click="navToDetailPage(item.id)">
					<view class="image-wrapper">
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
					<text class="title clamp u-line-clamp">{{item.title}}</text>
					<view class="price-box">
						<text class="price">{{item.price_market}}</text>
						<text class="old-price"> {{item.price_cost}}</text>
					</view>
					<view class="sale">
						<text>销量</text>
						<text>{{item.number_sales}}</text>
					</view>
				</view>
			</view>
			<!-- 精选商品展示二 -->
			<view class="good-style-other" v-else>
				<view class="style-content">
					<view class="style-list" v-for="(item,index) in goodsCate" :key="index" @click="navToDetailPage(item.id)">
						<view class="img">
							<u-lazy-load :image="item.logo" mode="aspectFit"></u-lazy-load>
							<view class="triangle"></view>
						</view>
						<view class="detail">
							<view class="title">
								{{ item.title }}
							</view>
							<view class="price">
								<view class="shop-price">
									￥{{ item.price_market }} <text>￥{{ item.price_cost }}</text>
								</view>
								<view class="purchase">
									购买
								</view>
							</view>
							<view class="sale">
								<text>销量</text>
								<text>{{item.number_sales}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<u-loadmore bg-color="transparent" margin-bottom="20" margin-top="20" :status="status" @loadmore="loadmore" />
		</scroll-view>
		<!-- 底部导航 -->
		<view class="foot">
			<view v-if="isIndex" class="list">
				<image src="../../static/tabbar/index-xuan.png" mode=""></image>
				<text class="is-seleted">首页</text>
			</view>
			<view v-else class="list" @tap="clickIndex">
				<image src="../../static/tabbar/index.png" mode=""></image>
				<text>首页</text>
			</view>
			<view v-if="isAll" class="list">
				<image src="../../static/tabbar/fen-xuan.png" mode=""></image>
				<text>全部</text>
			</view>
			<view v-else class="list" @tap="clickAll">
				<image src="../../static/tabbar/category.png" mode=""></image>
				<text>全部</text>
			</view>
<!-- 			<view  class="list" @tap="clickAll">
				<image src="../../static/tabbar/fen-xuan.png" mode=""></image>
				<text>全部</text>
			</view> -->
			<view class="list" @tap="jump('../main/me')">
				<image src="../../static/tabbar/user.png" mode=""></image>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import service from '@/store/service.js';
	export default {
		components: {
			uniIcons,
			uniLoadMore
		},
		data() {
			return {
				status: 'loadmore',
				isRoate: true,
				headerPosition: "fixed",
				headerTop: "0px",
				loadingType: 0, //加载更多状态
				filterIndex: 1,
				synthesis: 1,
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				goodsCate: [],
				sid: '',
				keyword: '',
				merch_id: '',
				currentPage: 1,
				total: 0,
				storeDetail: '',
				showStyle: true,
				isIndex:true,
				isAll:false,
			};
		},
		onLoad(options) {
			this.sid = options.tid
			this.merch_id = options.merch_id
			// // #ifdef H5
			// this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// // #endif
			this.cateId = options.tid;
			this.loadCateList(options.fid, options.sid);
			this.loadData();
			this.getGoodsCate();
			this.getStoreDetail()
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.getGoodsCate()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 0)
		},
		//加载更多
		onReachBottom() {
			console.log('上拉在家更多');
			this.loadData();
		},
		methods: {
			clickIndex(){
				this.isIndex = true
				this.isAll = false
			},
			clickAll(){
				this.isIndex = false
				this.isAll = true
				this.$http.post(service.api.index.getGoodList, {
					page: 1,
					cate_ids: this.sid,
					'order': 'desc',
					'sort': 'price',
					merch_id: this.merch_id
				}).then(res => {
					console.log(res, 'res');
					self.currentPage = res.data.current_page
					self.total = res.data.total
					var list = res.data.data;
					self.goodsCate = list;
				
				});
			},
			jump(url){
				uni.switchTab({
					url
				})
			},
			lower() {
				console.log('lower');
				if (this.goodsCate.length < this.total) {
					this.currentPage++
					this.getMoreList()
				} else {
					this.status = 'nomore'
				}
			},
			//上拉获取数据
			getMoreList() {
				if (this.synthesis == 1) {
					var order = 'desc';
				} else {
					var order = 'asc';
				}

				if (this.filterIndex == 1) {
					var sort = 'sales';
				} else {
					var sort = 'price';
				}
				this.$http.post(service.api.index.getGoodList, {
					page: this.currentPage,
					cate_ids: this.sid,
					'order': order,
					'sort': sort,
					keywords: this.keyword,
					merch_id: this.merch_id
				}).then(res => {
					if (res.code === 1) {
						uni.stopPullDownRefresh()
						this.currentPage = res.data.current_page
						let data = res.data.data
						let dataList = this.goodsCate.concat(data)
						this.goodsCate = this.goodsCate.concat(res.data.data)
					} else {
						this.$api.msg(res.info)
					}
				})
			},
			// 点击加载更多
			loadmore() {
				console.log('loadmore');
				console.log(this.goodsCate.length);
				console.log(this.total);
				if (this.goodsCate.length < this.total) {
					this.currentPage++
					this.getMoreList()
				} else {
					this.status = 'nomore'
				}
			},
			search(value) {
				// if (value.trim().length === 0) {
				// 	this.$api.msg('搜索内容不能为空！')
				// 	return
				// }
				console.log(value);
				this.$http.post(service.api.category.goodList, {
					keywords: value
				}).then(res => {
					this.goodsCate = res.data.data
				})
			},
			changeTab() {
				this.isRoate = !this.isRoate
			},
			_navRight(event) {
				switch (event) {
					case 'phone':
						uni.makePhoneCall({
							phoneNumber: '1231'
						})
						console.log('phone');
						break;
					case 'home':
						uni.switchTab({
							url: '../../main/index'
						})
						break;
					case 'shopCart':
						uni.navigateTo({
							url: '../../shoppingCart/shoppingCart'
						})
						break;
					case 'service':
						console.log('service');
						break;

				}
			},
			//排序点击
			tabClick(index, idx) {
				if (this.filterIndex === index) {
					if (idx == 1) {
						this.synthesis = 0;
					} else {
						this.synthesis = 1;
					}

				} else {
					this.filterIndex = index;
					this.synthesis = 1;
				}

				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});

				this.loading();
			},
			loading() {
				this.isLoading = false;
				this.scroll = false;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.currentPage = 1
				this.goodsCate = [];
				this.getGoodsCate();
			},
			getGoodsCate() {
				var self = this;
				if (self.synthesis == 1) {
					var order = 'desc';
				} else {
					var order = 'asc';
				}

				if (self.filterIndex == 1) {
					var sort = 'sales';
				} else {
					var sort = 'price';
				}
				self.$http.post(service.api.index.getGoodList, {
					page: self.currentPage,
					cate_ids: self.sid,
					'order': order,
					'sort': sort,
					keywords: self.keyword,
					merch_id: this.merch_id
				}).then(function(res) {
					console.log(res, 'res');
					self.currentPage = res.data.current_page
					self.total = res.data.total
					var list = res.data.data;
					self.goodsCate = list;

				});
			},
			//加载分类
			async loadCateList(fid, sid) {
				let list = this.goodsCate;
				let cateList = list.filter(item => item.pid == fid);

				cateList.forEach(item => {
					let tempList = list.filter(val => val.pid == item.id);
					item.child = tempList;
				})
				this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 2) {
						return;
					}
					this.loadingType = 1;
				} else {
					this.loadingType = 0
				}

				let goodsList = this.goodsList;
				if (type === 'refresh') {
					this.goodsList = [];
				}
				//筛选，测试数据直接前端筛选了
				if (this.filterIndex === 1) {
					goodsList.sort((a, b) => b.sales - a.sales)
				}
				if (this.filterIndex === 2) {
					goodsList.sort((a, b) => {
						if (this.priceOrder == 1) {
							return a.price - b.price;
						}
						return b.price - a.price;
					})
				}

				this.goodsList = this.goodsList.concat(goodsList);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.goodsList.length > 20 ? 2 : 0;
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
			},
			//分类点击
			changeCate(item) {
				console.log(item)
				this.cateId = item.id;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
			},
			//详情
			navToDetailPage(gid) {
				//测试数据没有写id，用title代替
				let id = gid;
				uni.navigateTo({
					url: `/pages/category/commodity?id=${gid}`
				})
			},
			// 获取店铺信息
			getStoreDetail() {
				this.$http.post(service.api.index.getMerchInfo, {
					id: this.merch_id
				}).then(res => {
					console.log(res, 'storeDetail');
					if (res.code === 1) {
						this.storeDetail = res.data
						console.log(this.storeDetail, 'this.storeDetai');
					} else {
						this.$api.msg(res.info)
					}
				})
			},
			changeSytle() {
				console.log(12313);
				this.showStyle = !this.showStyle
			},

		}
	}
</script>

<style lang="scss">
	.is-seleted{
		color: #F8124A!important;
	}
	.container {
		height: calc(100vh - 88rpx);
		height: 100%;
		display: flex;
		flex-direction: column;

		.header {
			height: 240rpx;
			width: 100%;
			background-image: linear-gradient(to right, #a6c0fe, #f68084);
			padding: 30rpx 10rpx 10px 25rpx;

			.detail {
				height: 110rpx;
				width: 100%;
				display: flex;

				.img {
					height: 100%;
					min-width: 120rpx;
					max-width: 120rpx;
					margin-right: 20rpx;

					>image {
						height: 100%;
						width: 100%;
					}
				}

				.right {
					color: #fff;

					.name {
						width: 650rpx;
						font-size: 32rpx;
						font-weight: 700;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-top: -10rpx;
					}

					.intro {
						box-sizing: border-box;
						width: 90%;
						height: 65rpx;
						font-size: 20rpx;
						line-height: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}

			}

			.search {
				margin-top: 20rpx;
			}
		}

		// 商品列表
		.shop-content {
			flex: 1;
			height: calc(100vh - 508rpx);
			overflow: auto;

			.nav-item {
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				position: relative;
				font-size: 24upx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);

				&.current {
					color: #F8124A;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 120upx;
						height: 0;
						border-bottom: 4upx solid #F8124A;
					}
				}
			}

			.cate-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				// width: 80upx;
				position: relative;
				font-size: 44upx;


			}

			// 筛选的样式
			.filter {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-size: 24upx;
				font-weight: 500;
				flex-wrap: nowrap;
				color: rgba(153, 153, 153, 1);

				.icon-filter {
					height: 24upx;
					width: 24upx;
					margin-top: 5upx;
				}
			}
		}

		/* 分类 */
		.cate-mask {
			position: fixed;
			left: 0;
			top: var(--window-top);
			bottom: 0;
			width: 100%;
			background: rgba(0, 0, 0, 0);
			z-index: 95;
			transition: .3s;

			.cate-content {
				width: 630upx;
				height: 100%;
				background: #fff;
				float: right;
				transform: translateX(100%);
				transition: .3s;
				padding-top: 61upx;
			}

			&.none {
				display: none;
			}

			&.show {
				background: rgba(0, 0, 0, .4);

				.cate-content {
					transform: translateX(0);
				}
			}
		}

		.cate-list {
			display: flex;
			flex-direction: column;
			height: 100%;

			.cate-item {
				display: flex;
				align-items: center;
				height: 90upx;
				padding-left: 30upx;
				font-size: 28upx;
				color: #555;
				position: relative;
			}

			// 筛选的样式
			.filter {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-size: 24upx;
				font-weight: 500;
				flex-wrap: nowrap;
				color: rgba(153, 153, 153, 1);

				.icon-filter {
					height: 24upx;
					width: 24upx;
					margin-top: 5upx;
				}
			}

			.two {
				height: 64upx;
				font-size: 30upx;
				font-size: 24upx;
				font-weight: 500;
				color: rgba(101, 101, 101, 1);
			}

			.children-content {
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				padding: 10upx;

				.children-list {
					width: 32.3333%;
					height: 101upx;
					border-radius: 5upx;
					text-align: center;
					padding: 10upx;
					box-sizing: border-box;

					.cl {
						height: 100%;
						width: 100%;
						line-height: 81upx;
						background: rgba(239, 239, 239, 1);
					}

				}
			}

			.active {
				color: #F8124A;
			}
		}

		/* 商品列表 */
		.goods-list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx;
			// background: #fff;

			.goods-item {
				display: flex;
				flex-direction: column;
				width: 48%;
				background: #fff;
				margin-top: 15rpx;
				padding: 10rpx;

				&:nth-child(2n+1) {
					margin-right: 4%;
				}

				.sale {
					& text:first-child {
						font-size: 26rpx;
						color: rgba(0, 0, 0, .6);
						font-weight: 600;
					}

					& text:last-child {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(0, 0, 0, .6);
						margin-left: 20rpx;
					}
				}
			}

			.image-wrapper {
				width: 100%;
				height: 330upx;
				border-radius: 3upx;
				overflow: hidden;
				border-radius: 10upx 10upx 0px 0upx;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.title {
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 26upx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.price-box {
				display: flex;
				align-items: center;
				padding-right: 10upx;
				font-size: 24upx;
				color: #909399;

				.old-price {
					text-decoration: line-through;
				}
			}

			.price {
				font-size: 32upx;
				color: #F8124A;
				line-height: 1;
				font-weight: bold;

				&:before {
					content: '￥';
					font-size: 26upx;
					font-weight: bold;
				}
			}

			.old-price {
				margin-left: 29upx;
			}

		}

		.good-style-other {
			width: 100%;
			padding: 0 20rpx 20rpx;
			background-color: #F3F3F3;

			.sale {
				& text:first-child {
					font-size: 26rpx;
					color: rgba(0, 0, 0, .6);
					font-weight: 600;
					margin-left: 30rpx;
				}

				& text:last-child {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, .6);
					margin-left: 20rpx;
				}
			}

			.goods-header {
				color: #262626;
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.style-content {
				width: 100%;
				padding: 10rpx;
				// background-color: #FFFFFF;

				.style-list {
					background-color: #FFFFFF;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 100%;
					position: relative;
					border-bottom: 1px solid #E7E7E7;
					margin-bottom: 20rpx;
					padding-bottom: 10rpx;
					padding: 20rpx;

					.img {
						height: 180rpx;
						width: 180rpx;

						>image {
							height: 100%;
							width: 100%;
						}
					}

					.detail {
						height: 100%;
						width: 480rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							padding: 10rpx 30rpx 0;
							font-size: 26rpx;
							color: $uni-text-color;
							font-weight: bold;
							line-height: 1.4;
							white-space: normal;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							word-break: break-all;
						}

						.price {
							height: 58rpx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;

							.shop-price {
								padding-left: 23rpx;
								font-size: 36rpx;
								font-weight: bold;
								color: #F8124A;
								display: flex;
								align-items: center;

								>text {
									color: #999999;
									font-size: 20rpx;
									padding-left: 10rpx;
									text-decoration: line-through;
								}
							}

							.purchase {
								border: 1px solid #F8124A;
								color: #F8124A;
								width: 120rpx;
								text-align: center;
								font-size: 26rpx;
								margin-bottom: 5rpx;
							}
						}
					}
				}
			}
		}

		// 侧边导航
		.nav-right {
			width: 80rpx;
			position: fixed;
			right: 0;
			bottom: 155rpx;
			overflow: hidden;
			transition: all .6s ease;
			z-index: 99;

			.list {
				height: 80rpx;
				width: 100%;
				background-color: #867A7D;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				transition: all .6s ease;

				.divide {
					width: 50rpx;
					height: 2px;
					background-color: #fff;
					position: absolute;
					bottom: 0;
				}

				>image {
					height: 40rpx;
					width: 40rpx;
					transition: all .6s ease;
				}

				.rotate {
					transform: rotate(180deg);
				}
			}

			.is-show {
				transform: translateY(320rpx);
			}
		}

		.navbar {
			// position: fixed;
			// left: 0;
			// top: var(--window-top);
			display: flex;
			width: 100%;
			height: 80upx;
			background: #fff;
			box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
			z-index: 10;
			justify-content: space-around;

			.nav-item {
				// flex: 1;
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				position: relative;
				font-size: 24upx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);

				&.current {
					color: #F8124A;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 120upx;
						height: 0;
						border-bottom: 4upx solid #F8124A;
					}
				}
			}

			.p-box {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.yticon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30upx;
					height: 14upx;
					line-height: 1;
					margin-left: 4upx;
					font-size: 26upx;
					color: #888;

					&.active {
						color: #F8124A;
					}
				}

				.icon-up {}


			}


			.cate-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				// width: 80upx;
				position: relative;
				font-size: 44upx;


			}

			// 筛选的样式
			.filter {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-size: 24upx;
				font-weight: 500;
				flex-wrap: nowrap;
				color: rgba(153, 153, 153, 1);

				.icon-filter {
					height: 24upx;
					width: 24upx;
					margin-top: 5upx;
				}
			}
		}
	}
	.foot{
		background-color: white;
		height:100rpx;
		width:100%;
		display:flex;
		.list{
			flex:1;
			height:100%;
			display:flex;
			flex-direction:column;
			justify-content:space-between;
			padding:6rpx 0;
			align-items:center;
			>image{
				height: 45rpx;
				width: 45rpx;
			}
			>text{
				font-size: 24rpx;
				color: rgba(0,0,0,.8);
			}
		}
	}
</style>
